<template>
  <view class="content">
    <!-- 头部文字信息区域 -->
    <view class="content-header">
      <image style="width: 100%; height: 250rpx;" src="https://small.qaqavr.com/img/zhongrui/homebg.png" mode=""></image>
      <!-- <text style="position: absolute; top: 25rpx; left: 30rpx; color: #FFFFFF; font-size: 30rpx;">杭州中锐计算机系统有限公司</text> -->
      <view class="swiper"><u-swiper radius="5" indicator circular showTitle :list="list" keyName="coverUrl" height="170" @click="getinSwiper"></u-swiper></view>
      <view class="swiperfont"><u-notice-bar bgColor="#ffffff" color="#b3b3b3" :text="navList" direction="column" @click="clickFont"></u-notice-bar></view>
    </view>

    <view class="hotsearch">
      <view><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
      热门搜索
    </view>

    <view class="bodybutton">
      <view class="buttonOne" @click="getinCompany">
        <image src="https://small.qaqavr.com/img/zhongrui/company.png" mode=""></image>
        <text>公司简介</text>
      </view>
      <view class="buttonTwo">
        <view @click="joinWork">
          <image src="https://small.qaqavr.com/img/zhongrui/zhuce.png" mode=""></image>
          <text style="position: absolute; top: 39rpx; left: 20rpx; color: #FFFFFF; font-size: 24rpx;">我要注册</text>
        </view>
        <view @click="gorecommend">
          <image src="https://small.qaqavr.com/img/zhongrui/tuijian.png" mode=""></image>
          <text style="position: absolute; bottom: 84rpx; left: 20rpx; color: #FFFFFF; font-size: 24rpx;">我要推荐</text>
        </view>
      </view>
    </view>

    <view class="hotsearch">
      <view><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
      社招任务

      <text @click="getinMore">更多>></text>
    </view>
    <!-- 工作列表区域 -->
    <view class="content-workList">
      <view class="workcontent" v-for="item in workList.slice(0, 3)" :key="item.id" @click="workDetails(item)">
        <view class="header-content">
          <text style="font-size: 30rpx; font-weight: bold; color: #000000;">
            {{ item.jobName }}
            <text style="font-size: 20rpx; color: #808080;">( {{ item.jobType.keyWord + item.jobNum }})</text>
          </text>
          <text style="font-size: 32rpx;font-weight: bold; color: #02a7f0;">{{ item.startSalary }} - {{ item.endSalary }}元</text>
        </view>
        <view class="header-body">
          <text style="margin-right: 20rpx; font-size: 22rpx; color: #808080;">{{ item.jobType.typeName }}</text>
          <text style="font-size: 22rpx; color: #808080;">招聘{{ item.recruitmentNum }}人</text>
        </view>
        <view class="header-fotter">
          <view class="tag" v-for="(item1, index) in item.keyList" :key="index">{{ item1 }}</view>
        </view>
      </view>
    </view>

    <view class="hotsearch">
      <view><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
      新闻中心

      <text @click="getinNews">更多>></text>
    </view>
    <!-- 新闻区域 -->
    <view class="content-news">
      <view class="bigbg" v-for="item in newsList.slice(0, 4)" :key="item.id" @click="newsDetails(item.id)">
        <!-- <image style="width: 100%;height: 100%;" :src="item.coverUrl"></image> -->
        <view class="bgphoto"><image style="width: 100%;height: 100%;" :src="item.coverUrl"></image></view>
        <text style="position: absolute; top: 10rpx ; right: 10rpx; color: #FFFFFF; font-size: 20rpx;">{{ item.createTime.substring(0,11) }}</text>
        <view class="bgfont">{{ item.titleName.substring(0, 10) }} ...</view>
      </view>
    </view>
   
   
    <!-- 底部客服按钮 -->
    <view class="hotsearch">
      <view><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
      咨询我们
    </view>
    
    
    <view class="content-btn">
      <button open-type="contact" >
        <text class="photoone"></text>
        联系客服
      </button>

      <button @click="getNumber">
        <text class="phototwo"></text>
        联系电话
      </button>
    </view>

    <u-divider text="没有更多了"></u-divider>
  </view>
</template>

<script>
export default {
  data() {
    return {
      thisb: false,
      // 头部滚动数据
      navList: [],
      // 轮播图数据
      list: [],
      //工作列表数据
      workList: [],
      // 新闻数据
      newsList: [],
      openId: '',
      lunbo: {}
    };
  },
  onLoad(options) {
    uni.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline'],
      success(res) {
        console.log('开启分享');
      },
      fail(e) {
        console.log(e);
      }
    });
    this.getworkList();
    // this.getNewsList();
    // this.getSwiperList();
    var scene = decodeURIComponent(options.scene);

    if (scene != '' && scene != 'undefined') {
      uni.setStorageSync('scene', scene);
    }
  },
  onShow() {
    this.getworkList();
    this.getNewsList();
    this.getSwiperList();
    this.getAllList();
  },

  methods: {
    // 分享

    onShareTimeline() {
      console.log('分享成功');

      if (uni.getStorageSync('openid') == '') {
        uni.navigateTo({
          url: '../loginpage/loginpage'
        });
      } else {
        uni.request({
          url: uni.$http.baseUrl + '/integral/getShareAdd?openId=' + uni.getStorageSync('openid'),
          method: 'GET',
          header: {
            token: uni.getStorageSync('tokenValue')
          },
          success(res) {
            console.log(res);
          }
        });
      }
    },

    onShareAppMessage() {
      console.log('分享成功');

      if (uni.getStorageSync('openid') == '') {
        uni.navigateTo({
          url: '../loginpage/loginpage'
        });
      } else {
        uni.request({
          url: uni.$http.baseUrl + '/integral/getShareAdd?openId=' + uni.getStorageSync('openid'),
          method: 'GET',
          header: {
            token: uni.getStorageSync('tokenValue')
          },
          success(res) {
            console.log(res);
          }
        });
      }
    },
    // 获取工作列表
    async getworkList() {
      const datachange = {
        equipment: 0,
        jobType: null,
        jobTypeId: null,
        pageIndex: 1,
        pageSize: 5,
        queryString: '',
        recruitmentType: 1
      };
      const { data } = await uni.$http.post('/job/findPage', datachange);
      console.log('我是工作列表=-==>', data);
      if (data.statusCode !== 200) {
        return uni.showToast({
          title: '获取失败',
          icon: 'none'
        });
      } else {
        this.workList = data.data.data;
        console.log('this.workList', this.workList);
      }
    },
    // 进入公司详情
    getinCompany() {
      uni.navigateTo({
        url: '../../components/companyProfile/companyProfile'
      });
    },
    // 获取滚动新闻列表
    async getNewsList() {
      const dataChange = {
        equipment: 0,
        newsType: 1,
        pageIndex: 1,
        pageSize: 5,
        queryString: ''
      };
      const { data } = await uni.$http.post('/news/findPage', dataChange);
      console.log('我是新闻列表===>', data);
      if (data.statusCode !== 200) {
        return uni.showToast({
          title: '获取失败',
          icon: 'none'
        });
      } else {
        // this.newsList = data.data.data;
        const res = data.data.data;
        console.log('我是this.list', this.list);
        res.forEach(item => {
          this.navList.push(item.titleName);
        });
        console.log('我是this.navList', this.list);
      }
    },

    // 新闻列表
    async getAllList() {
      const dataChange = {
        equipment: 0,
        pageIndex: 1,
        pageSize: 5,
        queryString: ''
      };
      const { data } = await uni.$http.post('/news/findPage', dataChange);
      if (data.statusCode !== 200) {
        return uni.showToast({
          title: '获取失败',
          icon: 'none'
        });
      } else {
        this.newsList = data.data.data;
      }
    },

    //轮播图数据
    async getSwiperList() {
      const dataChange = {
        equipment: 0,
        newsType: 0,
        pageIndex: 1,
        pageSize: 10,
        queryString: ''
      };
      const { data } = await uni.$http.post('/news/findPage', dataChange);
      console.log('我是轮播图数据', data.data.data);
      if (data.statusCode !== 200) {
        return uni.showToast({
          title: '获取失败',
          icon: 'none'
        });
      } else {
        this.list = data.data.data;
        this.list.forEach(item => {
          console.log('wowoww', item);
          item.title = item.titleName;
        });
      }
    },
    // 点击轮播图 进入新闻详情
    getinSwiper(index) {
      //console.log('我是轮播图', index)
      //console.log('轮播图', this.list)
      const inx = index;
      this.list.forEach((item, index) => {
        //console.log(item)
        //console.log(index)
        if (index === inx) {
          this.lunbo = item;
        } else {
          return;
        }
      });
      console.log('哈哈哈哈哈', this.lunbo);
      uni.navigateTo({
        url: '../../components/newsDetails/newsDetails?id=' + this.lunbo.id
      });
    },
    // 点击文字进入新闻详情
    clickFont(e) {
      console.log(e);
      uni.navigateTo({
        url: '../newslistMore/newslistMore'
      });
    },

    // 进入工作列表更多页面
    getinMore() {
      uni.navigateTo({
        url: '../worklistMore/worklistMore'
      });
    },
    getinNews() {
      uni.navigateTo({
        url: '../newslistMore/newslistMore'
      });
    },

    // 我要报名
    joinWork() {
      const openid = uni.getStorageSync('openid');
      if (openid == '') {
        uni.navigateTo({
          url: '../loginpage/loginpage'
        });
      } else {
        uni.navigateTo({
          url: '../../components/sociology/sociology'
        });
      }
    },
    // 我要推荐
    gorecommend() {
      const openid = uni.getStorageSync('openid');
      if (openid == '') {
        uni.navigateTo({
          url: '../loginpage/loginpage'
        });
      } else {
        uni.navigateTo({
          url: '../recommend/recommend'
        });
      }
    },
    // 工作详情
    workDetails(item) {
      console.log(item);
      uni.navigateTo({
        url: '../../components/workDetails/workDetails?item=' + JSON.stringify(item)
      });
    },
    // 新闻详情
    newsDetails(id) {
      console.log(123);
      uni.navigateTo({
        url: '../../components/newsDetails/newsDetails?id=' + id
      });
    },

    // 拨打电话
    getNumber() {
      uni.makePhoneCall({
        // 手机号
        phoneNumber: '0551-66129000',
        // 成功回调
        success: res => {
          console.log('调用成功!');
        },
        // 失败回调
        fail: res => {
          console.log('调用失败!');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  background-color: #f7f7f7;

  .content-header {
    position: relative;
    height: 450rpx;
    background-color: #f7f7f7;
    .swiper {
      position: absolute;
      top: 70rpx;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      height: 300rpx;
      padding: 0 20rpx;
    }
    .swiperfont {
      position: absolute;
      bottom: 15rpx;
      width: 100%;
      box-sizing: border-box;
      left: 0;
      padding: 0 20rpx;
      /deep/.u-icon__icon {
        color: #2589ff !important;
      }
    }
  }

  .hotsearch {
    position: relative;
    display: flex;
    align-items: center;
    height: 50rpx;
    padding: 10rpx 20rpx;
    margin-top: 10rpx;
    color: #000000;
    font-weight: bold;
    view {
      display: inline-block;
      width: 10rpx;
      height: 80%;
      margin-right: 20rpx;
    }
    text {
      position: absolute;
      right: 20rpx;
      font-size: 22rpx;
      color: #a4a4a4;
    }
  }
  .bodybutton {
    height: 300rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;

    .buttonOne {
      width: 55%;
      position: relative;
      margin-right: 10rpx;
      image {
        width: 100%;
        height: 100%;
      }
      text {
        position: absolute;
        top: 40rpx;
        left: 30rpx;
        color: #ffffff;
      }
    }
    .buttonTwo {
      width: 45%;
      position: relative;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-around;
      view {
        width: 100%;
        height: 50%;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .content-work {
    height: 150rpx;
    margin-top: 10rpx;
    background-color: #f7f7f7;
    padding: 20rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .workO {
      width: 50%;
      height: 100%;
      margin-right: 20rpx;
      border-radius: 15rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ff9900;
      font-size: 30rpx;
      color: #ffffff;
      font-weight: 700;

      text {
        display: inline-block;
        width: 50rpx;
        height: 35rpx;

        margin-right: 10rpx;
        background: url(https://small.qaqavr.com/img/zhongrui/user-id.png) no-repeat;
        background-size: contain;
      }
    }

    .workT {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15rpx;
      background-color: #18b566;
      font-size: 30rpx;
      color: #ffffff;
      font-weight: 700;

      text {
        display: inline-block;
        width: 35rpx;
        height: 35rpx;
        margin-right: 10rpx;
        background: url(https://small.qaqavr.com/img/zhongrui/to-do@2x.png) no-repeat;
        background-size: contain;
      }
    }
  }

  .content-company {
    margin-top: 10rpx;
    height: 100rpx;
    padding: 0 20rpx 20rpx 20rpx;
    background-color: #f2f2f2;

    .companyO {
      width: 100%;
      height: 100%;
      border-radius: 15rpx;
      background-color: #3c9cff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38rpx;
      color: #ffffff;
      font-weight: 600;

      text {
        display: inline-block;
        width: 50rpx;
        height: 50rpx;
        margin-right: 10rpx;
        background: url(https://small.qaqavr.com/img/zhongrui/company.png) no-repeat;
        background-size: contain;
      }
    }
  }

  .content-workList {
    background-color: #f7f7f7;
    padding: 0 20rpx;

    .workcontent {
      // height: 200rpx;
      background-color: #ffffff;
      padding: 20rpx;
      display: flex;
      margin-bottom: 10rpx;
      border-radius: 10rpx;
      flex-direction: column;
      .header-content {
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .header-body {
        margin-top: 15rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .header-fotter {
        margin-top: 25rpx;
        display: flex;
        flex-wrap: wrap;
        .tag {
          font-size: 20rpx;
          margin-right: 10rpx;
          width: fit-content;
          color: #7f7f7f;
          box-sizing: border-box;
          padding: 10rpx;
          border-radius: 5rpx;
          background-color: #f1f1f1;
        }
      }
    }

    .workList-more {
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      view {
        height: 60rpx;
        width: 150rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150rpx;
        font-size: 26rpx;
        border: 2rpx solid #ccc;
        border-radius: 25rpx;
      }
    }
  }

  .content-news {
    background-color: #f7f7f7;
    padding: 0 20rpx;
    padding-bottom: 0;
    margin-top: 10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .bigbg {
      position: relative;
      width: 48%;
      height: 250rpx;
      margin-left: 10rpx;
      margin-bottom: 15rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      overflow: hidden;
      .bgphoto {
        height: 200rpx;
        background-color: pink;
      }
      .bgfont {
        background-color: #FFFFFF;
        height: 50rpx;
        display: flex;
        align-items: center;
        padding-left: 10rpx;
        font-size: 26rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .content-btn {
    padding: 0 20rpx;
    margin: 0 20rpx;
    height: 150rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    button {
      width: 50%;
      height: 100rpx;
      margin-right: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-color: #02a7f0;
      color: #000000;
      font-weight: bold;
      font-size: 28rpx;
      border-radius: 10rpx;
      background-color: #ffffff;
      box-shadow: 0 0 5rpx #ccc;
      .photoone {
        display: inline-block;
        width: 40rpx;
        height: 40rpx;
        background: url(https://small.qaqavr.com/img/zhongrui/kefu.png)no-repeat;
        background-size: contain;
        margin-right: 15rpx;
      }
      .phototwo {
        display: inline-block;
        width: 40rpx;
        height: 40rpx;
        background: url(https://small.qaqavr.com/img/zhongrui/phone.png)no-repeat;
        background-size: contain;
        margin-right: 15rpx;
      }
    }
  }

  /deep/.u-divider.data-v-239d3faa {
    margin: 0;
    padding: 15rpx;
    // background-color: #f2f2f2;
  }
}
</style>
